*{
    margin: 0;
    padding: 0;
}

.nav{
    width: 10.8rem;
    height: 1.5rem;
    background:linear-gradient(to bottom, #e1e4f0, #e1e3e8) ;
    display: flex;
    // justify-content: center;
    padding-bottom: 1rem;
    .logo{
        display: inline-block;
        width: .83rem;
       height: .83rem; 
       background-color: #fcfcfc;
       border-radius: .3rem;
       align-self: center;
       margin-left: .45rem;
       display: flex;
       justify-content: center;
        span{
          display: inline-block;
          width: .5rem;
          height: .35rem;
          font-size: 0.5rem;
          align-self: center;
          color: #c9cee1;
          text-align: center;
          line-height: 100%;
    }
    }
    li{
        list-style: none;
        display: flex;
        position: relative;
      input{        
        width: 6.8rem;
        height: .96rem;
        background-color: #f8fbfb;
        border-radius: .5rem;
        border: none;
        align-self: center;
        margin-left: .45rem;
        padding-left: 1rem;
        font-size: .4rem    ;
    }  
    span:nth-child(2){
        position: absolute;
        left: .8rem;
        align-self: center;
        color: #a6a6a6;
    }
    span:nth-child(3){
        position: absolute;
        right: .8rem;
        align-self: center;
        color: #a6a6a6;
    }
    }
    
    >span{
        width: .63rem;
        height: .63rem;
        align-self: center;
        font-size: 0.7rem;
        line-height: 100%;
        margin-left: .3rem;
        color: #f9f9fa;
    }
    }
.section{
    width: 10.8rem;
    .sec-top-pic{
        position: relative;
        img{
            width: 10.8rem;
            height: 4.3rem;
            margin-top: -1rem;
        }
        >span{
            display: block;
            height: .65rem;
            width: 2.1rem;
            font-size: .16rem;
            border-radius: .5rem;
            text-align: center;
            line-height: .65rem;
            color: white;
            position: absolute;
            bottom: .3rem;
            left: .4rem;
            background-color: #acb5e7;
        }
    }
    .sec-center-title{
        width: 100%;
        height:.9rem;
        display: flex;
        justify-content: space-around;
        li{
            list-style: none;
            width: 2.2rem;
            height: .42rem;
            align-self: center;
            display: flex;
            img{
                width: .42rem;
                align-self: center;
                height: .42rem;
            }
            >span{
                font-size: .3rem;
                color: #a6a6a6;
                align-self: center;
                margin-left: .1rem;
            }
        }
    }
    .sec-center-ten-pic{
        width: 9.25rem;
        height: 4.15rem;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        li{
            list-style: none;
            width: 1.84rem;
            height: 1.8rem;
            position: relative;
            img{
                    width:100%;
                    height: 100%;
                    position: absolute;
                    left: 50%;
                transform: translateX(-50%);
            }
            span{
                position: absolute;
                font-size: .14rem;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
    .sec-pic-bottom{
        width: 10.2rem;
        height: 6.6rem; 
        margin: auto;
        img{
           width: 10.2rem;
        height: 6.6rem; 
        margin:.4rem auto;
        }
        
    }
    .sec-phone-choose{
        >span{
            font-size: .34rem;
            font-weight: bold;
            margin-top: .2rem;
            margin-left: .3rem;
        }
        >div{
            width: 10.2rem;
            height: 7.4rem;
            // background-color: red;
            margin: auto;
            display: grid;
            // flex-wrap: grid;
            grid-template-columns: repeat(2,5rem);
            grid-template-rows: repeat(3,2.33rem);
            justify-content: space-between;
            align-content: space-between;
            
            li{
                // width: 5rem;
                // height: 2.33rem;
                list-style: none;
                background-color: blueviolet;
                
                &:nth-child(1){
                    grid-row: 1/4;
                    img{
                        width: 5rem;
                        height: 7.4rem;
                    }
                }
                &:nth-child(2){
                    img{
                        width: 5rem;
                        height: 2.33rem;
                    }
                }
                &:nth-child(3){
                    img{
                        width: 5rem;
                        height: 2.33rem;
                    }
                }       
                         &:nth-child(4){
                            img{
                                width: 5rem;
                                height: 2.33rem;
                            }
                }
            }
        }
    }
    .sec-foot-pic{
        width: 10.8rem;
        height: 6.6rem;
        img{
            width: 10.8rem;
        height: 6.6rem;
        }
        

    }
}
.aside-miaosha{
    .miaosha-top{
        width: 9.8rem;
        height: 1.2rem;
        margin: auto;
        // background-color: red;
        position: relative;
        display: flex;
        span:nth-child(1){
            font-size: .3rem;
            font-weight: bold;
            align-self: center;
        }
        button:nth-child(2){
            width: 1.2rem;
            height: .4rem;
            background-color: black;
            border-top-left-radius: .5rem;
            color: white;
            border: none;
            align-self: center;
            margin-left: .2rem;
            border-bottom-left-radius:.5rem ;
        }
        button:nth-child(3){
            width: 1.2rem;
            height: .4rem;
            background-color: white;
            border-top-right-radius: .5rem;
            color: black;
            border: 1px solid black;
            align-self: center;
            // margin-left: .2rem;
            border-bottom-right-radius:.5rem ;
        }
        span:nth-child(4){
            font-size: .3rem;
            align-self: center;
            position: absolute;
            font-weight: bold;
            right: 3rem;
        }    
            span:nth-child(5){
            font-size: .3rem;
            align-self: center;
            font-weight: bold;
            position: absolute;
            right: .5rem;
        }
    }
    .miaosha-pic{
        width: 10rem;
        height: 2.7rem;
        background-color: white;
        margin: auto;
        display: flex;
        li{
            list-style: none;
            width: 2.5rem;
            height: 2.7rem;
            position: relative;
            img{
                width: 2rem;
                height: 2rem;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
            span{
                font-size: .30rem;
                position: absolute;
                bottom: 0;
                width: 100%;
                text-align: center;
                del{
                    font-size: .20rem;
                    color: #a6a6a6;
                }
            }
        }
    }
}
.headlines{
    width: 10.2rem;
    height: 1.3rem;
    background-color: white;
    margin: auto;
    display: flex;
    position: relative;
    span:nth-child(1){
        font-size: .4rem;
        font-weight: bold;
        align-self:center;
    }
    span:nth-child(2){
        width: .65rem;
        height: .47rem;
        background-color:#ffe7da;
        color: #e7503a;
        font-size: .3rem;
        border-radius: .1rem;
        line-height: .47rem;
        text-align: center;
        align-self: center;
        margin-left: .15rem;
    }
    span:nth-child(3){
        font-size: .3rem;
        align-self: center;
        margin-left: .15rem;
    }
    span:nth-child(4){
        position: absolute;
        align-self: center;
        right: 0;
        font-size: .3rem;
    }
}
.notice{
    width: 10.2rem;
    height: .9rem;
    background-color: #f7f7f7;
    margin: auto;
    position: relative;
    display: flex;
    border-radius: .2rem;
    span:nth-child(1){
        color: #7b7b7b;
        font-size: .3rem;
        align-self: center;
    }
    span:nth-child(2){
        position: absolute;
        right: 0;
        align-self: center;
        font-size: .3rem;
        color: #7b7b7b;
    }
}
.price{
    width: 10.2rem;
    // height: 10rem;
    // background-color: red;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    li{
        list-style: none;
        width: 4.9rem;
        height: 7.5rem; 
position: relative;
            img{
                width: 3.88rem;
                height: 3.88rem;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        >span:nth-child(2){
            font-size: .4rem;
            position: absolute;
            bottom: 2rem;
            left: .4rem;
        }
        >span:nth-child(3){
            font-size: .3rem;
            position: absolute;
            bottom: 1.5rem;
            left: .4rem;
            color: #7b7b7b;
        }
        p:nth-child(4){
            font-size: .4rem;
            position: absolute;
            left: .4rem;
            bottom: 1.0rem;
            >span{
                font-size: .25rem;
            }
        }

    }
}
.foot{
    width: 100%;
    height: 1.25rem;
    position: fixed;
    bottom: 0rem;
    // position: absolute;
    
    background-color: white;
    display: flex;
    li{
        list-style: none;
        width: 20%;
        height: 1.25rem;
        display: flex;
        justify-content: center;
        position: relative;
        a{
            position: relative;
            img{
            width: .61rem;
            height: .6rem;
            
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
        
        &:nth-child(1){
            span{
                font-size: .3rem;
                
                position: absolute;
                bottom: .1rem;
                >a{
                    color: #ff6323;
                }
            }
            }
            span{
                font-size: .3rem;
                position: absolute;
                bottom: .1rem;
                
                a{
                    color: black;
                }
            }
            a{
                text-decoration: none;
                
            }
    }
    }